<template>
	<view class="page">
		<fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
			<block slot="content">详情</block>
		</fu-custom>
		<view class="goods-wrap  margin-bottom-sm">
			<view class="flex  text-df text-666 justify-between padding-bottom">
				<view class="w48 flex-shrink">所属仓库：{{storeHouseInfo.name}} </view>
				<view class="w48 text-right">仓库地址：{{storeHouseInfo.province}}-{{storeHouseInfo.city}}-{{storeHouseInfo.district}}-{{storeHouseInfo.address}}</view>
			</view>
			<view class="flex align-center text-df text-666 justify-between padding-bottom">
				<view class="">申请时间：{{refundInfo.create_time||""}}</view>
			</view>
			<view class="bg-white padding-sm radius-16 margin-bottom" v-for="(item,index) in refundInfo.goods_list" :key="index">
				<view class="flex    " >
					<view class="img-200 overHidden relative">
						<fu-image :src="item.goods_thumb" mode="aspectFill"></fu-image>
						<view class="box-kong padding-lr-16 padding-tb-4 text-white text-sm" v-if="item.port_name">
							{{item.port_name}}
						</view>
					</view>
					<view class="goods-info margin-left-sm">
						<view>
							<view class="text-df text-333 text-cut-2 text-weight-500">{{ item.goods_name || '' }}
							</view>
							<view class="text-sm text-999  margin-top-sm">
								商品货号：{{ item.goods_sn || '' }}
							</view>
						</view>
						<view class="flex justify-between ">
							<text class="text-df text-prices">¥{{ item.shop_price || '' }}</text>
							<text class="text-999 text-sm">销量{{ item.goods_sales_sum || '' }}</text>
							<text class="text-sm text-999">库存{{ item.goods_stock || '' }}</text>
						</view>
					</view>
				</view>
				<view class="flex align-center justify-end padding-top">
					<view class="flex align-center text-666 text-sm">
						<view class=" ">补仓数量：{{item.num}}</view>
					</view>
				</view>
			</view>
		</view>
		<fu-notwork></fu-notwork>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				sku_id: '', // 商品规格
				imgWechatUrl: this.imgWechatUrl,
				min: 1,
				max: 6,
				number: '', //
				order_sn: null, // 订单编号
				num: 0, // 商品数量
				images: [],
				states: [{
					name: global.i18n['已收到货'],
					id: 1
				}, {
					name: global.i18n['未收到货'],
					id: 2
				}], // 货物状态
				staicon: [{
					name: '退款',
					id: 1
				}], // 退款原因
				statindex: 0,
				refundInfo: '',
				select_reason: 0,
				images: [],
				refund_content: '', // 退款说明
				visible: false,
				storeHouseInfo: '', //仓库信息
				express_price: 0,
				isLoading: false, // 防连点
			};
		},
		onLoad(options) {
			const {
				id,
			} = options;
			this.storeHouseInfo=uni.getStorageSync('storehouseInfo')
			this.goods_id = id;			
			this.getData();
		},
		methods: {			
			//获取
			getData() {
				let data = {
					id: this.goods_id,
				};
				this.$api.post('/v1/63eb1e5092f2c', data).then(res => {
					if (res.data.code == 1) {
						this.refundInfo = res.data.data;
					}
				});
			},
			
			// 提交
			handleSubmit() {
				if (this.isLoading) return;
				uni.hideKeyboard();
				if (!this.refund_content.trim()) return this.$message.info(this.i18n['请输入退款说明']);
				let arr = '';
				if (this.images.length != 0) {
					arr = this.images.join(',');
				}
				let data = {
					order_sn: this.order_sn,
					refund_type: Number(this.statindex) + 1,
					refund_reason: this.refundInfo.refund_reason[this.select_reason].reason,
					refund_content: this.refund_content,
					goods_id: this.goods_id,
					goods_money: this.refundInfo.shop_price,
					num: this.refundInfo.num,
					sku_id: this.sku_id,
					refund_money: this.refundInfo.refund_money
				};
				if (arr) {
					data.refund_picture = arr;
				}
				this.isLoading = true;
				this.$api.post(global.apiUrls.postGoodsAfterSale, data).then(res => {
						if (res.data.code == 1) {
							this.$message.info("售后申请已提交");
							// 通知列表页面更新数据
							uni.$emit('onPageUpdata', {
								type: 6, // 1: 取消订单， 2: 提醒发货， 3: 确认订单， 4: 删除订单，5: 评论， 6: 提交售后
							});
							// 通知详情页面更新数据
							uni.$emit('onOrederDetailPageUpdata');
							setTimeout(() => {
								this.isLoading = false;
								uni.navigateBack();
							}, 800);
						} else {
							this.isLoading = false;
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						this.isLoading = false;
						console.log('err: ' + JSON.stringify(err));
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		padding-bottom: 100rpx;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}

	.goods-wrap {
		padding: 24rpx 24rpx 34rpx;
	}

	.margin-t-8 {
		margin-top: 8rpx;
	}

	.padding-b-60 {
		padding-bottom: 60rpx;
	}

	.text-111 {
		color: #111111;
	}

	.text-bf {
		color: #bfbfbf;
	}

	.line-20 {
		height: 20rpx;
		width: 100%;
		background: #F8F8F8;
	}

	.after-item-wrap {
		padding: 16rpx 24rpx 32rpx;

		.after-item {
			height: 78rpx;

			&.money {
				position: relative;
				height: 122rpx;
				padding-bottom: 44rpx;

				.tips {
					position: absolute;
					left: 0;
					bottom: 20rpx;
				}
			}

		}
	}


	.submit-btn {
		position: fixed;
		bottom: 80rpx;
		bottom: calc(80rpx + constant(safe-area-inset-bottom));
		bottom: calc(80rpx + env(safe-area-inset-bottom));
		left: 0rpx;
		width: 92%;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		background: $bgtheme;
		font-size: 32rpx;
		font-weight: 500;
	}

	.wen {
		width: 702rpx;
		height: 272rpx;
		// border: 1rpx solid #e8e8e8;
		margin-top: 20rpx;
		padding: 24rpx;
		font-size: 28rpx;
		font-weight: 400;
		background: #F8F8F8;
		;
		border-radius: 16rpx;
		position: relative;

		textarea {
			width: 100%;
			height: 85%;
		}

		.tips {
			position: absolute;
			right: 24rpx;
			bottom: 24rpx;
		}
	}

	.img-200 {
		width: 200rpx;
		height: 200rpx;
		border-radius: 16rpx;
	}

	.goods-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		overflow: hidden;

		&>view {
			width: 100%;
		}
	}

	/deep/ .sex-wrap .w-picker-view {
		height: 228rpx;
	}

	/deep/ .w-picker-item {
		position: relative;

		// height: 108rpx!important;
		// line-height: 108rpx!important;
		&::before {
			content: '';
			width: 100%;
			height: 1px;
			background: #eee;
			transform: scaleY(0.5);
			position: absolute;
			top: 0;
			left: 0;
		}

		&::after {
			content: '';
			width: 100%;
			height: 1px;
			background: #eee;
			transform: scaleY(0.5);
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}

	.box-kong {
		position: absolute;
		border-radius: 16rpx 0 16rpx 0;
		left: 0;
		top: 0;
		z-index: 99;
		background: rgba(0, 0, 0, 0.6);
	}
</style>
